import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    moduleId: module.id,
    selector: 'guide-message',
    template: `
    <h2>Async Hero Message and AsyncPipe</h2>
    <p>Message: {{ message$ | async }}</p>
    <button (click)="resend()">Resend</button>`,
})
export class MessageComponent implements OnInit {
    message$: Observable<string>;
    private messages = [
        'You are my hero!',
        'You are the best hero!',
        'Will you be my hero?'
    ];
    constructor() { }

    ngOnInit() { this.resend(); }
    resend() {
        this.message$ = Observable.interval(500)
            .map(i => this.messages[i])
            .take(this.messages.length);
    }
}